<style>
  .BIWRAP{
    position: absolute;
    top:0;
    left:0;
    z-index: 1000;
  }
</style>
<template>
  <div class="BIWRAP">
    <v-top></v-top>
    <div class="content">
      <div class="left" :style="{'backgroundImage':'url('+this.$store.getters.theme[3]+')'}">
        <div class="bk-avatar" @click="projectShade">
          <img :src="chooseAfterSrc" class="img-circle" :alt="chooseAfterName">
          <p> <i class="el-icon-upload"></i>
            &nbsp;&nbsp;{{chooseAfterName}}
          </p>
        </div>
        <div class="divider2"></div>
        <el-col>
          <el-menu :unique-opened="true" class="el-menu-vertical-demo" router @open="handleOpen" @close="handleClose" @select="handleSelectLeft" :theme="$store.getters.theme[4]" :default-active='routerName'>
            <el-submenu v-for="(value,key) in dataList[endProjectId]" :index="key">
              <template slot="title">
                <span class="chart-icon"></span>
                {{moudleName[key]['name']}}
              </template>
              <!-- :index="p.index" -->
              <el-menu-item v-for="(p,k) in value" :index="moudleName[key]['pages'][p]['index']"> <i class="el-icon-document"></i>
                {{moudleName[key]['pages'][p]['name']}}
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-col>
      </div>
      <div class="right">
        <router-view @activemenu="activeMenu"></router-view>
      </div>
    </div>
    <!-- v-show='projectModule' -->
    <div class="projectNavList" v-show='projectModule'>
      <div class="shadeChoose">
        <div class="vicp-close"  @click="projectModule=false">
          <i class="el-icon-close vicp-icon4"></i>
        </div>
        <div class="shadeMain">
          <div class="title">
            <span>
              <span></span>
            </span>
            <h1>游戏工程列表</h1>
            <span>
              <span></span>
            </span>
          </div>
          <div class="projects">
            <div class="projectList">
              <li v-for='(value,index) in gameNames' @click="chooseProjects(index)">
                {{value.name}}
              </li>
            </div>
            <div class="projectChoose">
              <li v-for="(value,index) in navlistGroup" :key="index" @click="projectChange(value)">
                <img :src="projectName[value].src" :alt="projectName[value].name">
                <p>{{projectName[value].name}}</p>
              </li>
            </div>
          </div>
        </div>
      </div>
    </div>
    <v-notice></v-notice>
  </div>
</template>
<script>
import top from '../components/top.vue'
import biNotice from '../components/biNotice/biNotice.vue'
import realTimeData from './main/realTime/realTimeData/realTimeData.vue'
import moudleConfig from "../assets/js/moudleName.js"
import qlCN from "../assets/img/ql_cn.png"
import jzCN from "../assets/img/jz_cn.jpg"
import lybCN from "../assets/img/lyb_cn.png"
import zjCN from "../assets/img/zj_cn.png"
import zjHW from "../assets/img/zj-hw.jpg"
import mzHW from "../assets/img/mz_hw.png"
import rrzj from "../assets/img/rrzj.jpg"
export default {
  name: 'app',
  data () {
    return {
      chooseAfterIndex: '',
      chooseAfterName: '',
      chooseAfterSrc: '',
      // 工程模态框
      projectModule: false,
      dataList: {},
      // 工程IDlist
      projectId:[],
      // 模块IDlist
      moduleId:[],
      moudleName: moudleConfig,
      // 页面IDlist
      pageId:{},
      pageName: {
      },
      color: [],
      navlistGroup: [],
      routerName:"/main/realTime/"+"realTimeData",//默认菜单
      gameNames: [
        {name:'九州天空城3D',index:2},
        {name:'权力与荣耀',index:1},
        {name:'琅琊榜',index:3},
        {name:'战舰联盟',index:4},
        {name:'梦幻诛仙',index:5},
        {name:'软软大作战',index:6}
      ]
    }
  },
  methods: {
    // 子级调用激活菜单 并且跳转页面  
    activeMenu(arr){
      this.$router.push({ path: arr[1][1] });
      this.routerName = arr[0];
      this.handleSelectLeft(arr[0],arr[1]);
    },

    // 工程切换弹窗
    projectShade() {
      this.projectModule = true;
      this.nullArr();
    },
    // 工程切换
    projectChange(index) {
      this.chooseAfterName = this.projectName[index].name;
      this.chooseAfterSrc = this.projectName[index].src;
      localStorage.setItem("ZULONGBIPROJECTID",index.split('-')[1]);
      localStorage.setItem("ZULONGBISORTID",index.split('-')[0]);
      localStorage.setItem("ZULONGBICURRENCY",this.projectName[index].currency)
      this.chooseAfterIndex = index;
      window.location.reload();
    },
    // 调用父组件的backTop
    up() {
        this.$emit('up');
    },
    handleSelectLeft(key, keyPath) {
      /*根据选择到的keyPath 来定位到是某个页面的ID*/
      var pages = moudleConfig[keyPath[0]].pages;
      for(var i in pages){
        if(pages[i].index===key){
          localStorage.setItem('ZULONGBIPAGEID',i);
        }
      }
      this.up();
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    // 去除空的数组
    nullArr() {
      for(var i=0,len=this.projectId.length;i<len;i++){
        if(this.projectId[i].length === 0){
          this.projectId.splice(i,1);
          this.gameNames.splice(i,1);
          len--;
          i--;
        }
      }
      // console.log(this.projectId,this.gameNames)
    },
    //  将数据入页面
    pageDataShow() {
      this.projectId = [];
      if(JSON.stringify(this.$store.getters.permissions) !== "{}"){
        this.dataList = this.$store.getters.permissions;
        var data = this.$store.getters.permissions;
      }else{
        this.dataList = JSON.parse(localStorage.getItem("ZULONGBINAVLIST"));
        var data = JSON.parse(localStorage.getItem("ZULONGBINAVLIST"));
      }
      for(var i in data){
        // 设置工程2位第一个
        // if(i === '2'){
        //   this.projectId.unshift(i);
        // }else{
        this.projectId.push(i);
        // }
        var moduleArr = [];
        for(var j in data[i]){
          moduleArr.push(j)
        }
        this.moduleId.push(moduleArr)
      }
      var str = localStorage.getItem("ZULONGBISORTID") + '-' +localStorage.getItem("ZULONGBIPROJECTID");
      this.endProjectId = str;
      this.chooseAfterName = this.projectName[str].name;
      this.chooseAfterSrc = this.projectName[str].src;
      localStorage.setItem("ZULONGBICURRENCY",this.projectName[str].currency);
      this.chooseAfterIndex = localStorage.getItem("ZULONGBIPROJECTID");
    },
    // 根据projectId 来画组
    projectGroup() {
        var arr = [[],[],[],[],[],[]];
        for(var i=0; i<this.projectId.length; i++){
            var projectNumber = Number(this.projectId[i].split('-')[0]);
            for(var j=0; j<arr.length; j++){
                if(projectNumber>=(j+1)*100 && projectNumber<(j+2)*100){
                  arr[j].push(this.projectId[i])
                }
            }
        }
        this.projectId = arr;
    },
    // 获取到索引‘
    getIndex() {
      for(var i=0; i<this.projectId.length; i++){
        for(var j=0; j<this.projectId[i].length; j++){
          if(this.projectId[i][j].split('-')[1] === this.chooseAfterIndex){
            return j
          }
        }
      }
    },
    // 通过pageId获取到当前页面跳转的URL
    localUrl() {
      var pageId = localStorage.getItem('ZULONGBIPAGEID');
      var strId = localStorage.getItem("ZULONGBISORTID") + '-' +localStorage.getItem("ZULONGBIPROJECTID");
      var save = '-'
      var tempArr = [],tempArr2 = [],tempnum;
      for(var i in this.dataList[strId]){
        var strIdChildren = this.dataList[strId][i];
        tempArr.push(i)
        for(var j=0; j<strIdChildren.length; j++){
          tempArr2.push(strIdChildren[j])
        }
      }
      for(var n=0; n<tempArr2.length; n++){
        if(tempArr2[n] == Number(pageId)){
          tempnum = pageId;
          break;
        }else if(n===tempArr2.length-1){
          tempnum = tempArr2[0];
        }
      }
      pageId = tempnum;   
      localStorage.setItem('ZULONGBIPAGEID',pageId);
      if(pageId.length>3){
        var local = moudleConfig[pageId.substring(0,2)]['pages'][pageId]['index'];
      }else if(Number(pageId) === 100){
        var local = moudleConfig[0]['pages'][pageId]['index'];
      }else{
        var local = moudleConfig[pageId.substring(0,1)]['pages'][pageId]['index'];
      }
      this.$router.push({ path: local });
    },
    // 选择工程
    chooseProjects(Num) {
        this.navlistGroup = this.projectId[Num];
        // console.log('navalist',this.navlistGroup,Num)
    }
  },
  components: {
    "realTimeData": realTimeData,
    "v-top": top,
    "v-notice": biNotice
  },
  computed: {
  },
  watch: {
  },
  beforeCreate() {
      var obj = {
        "1" : {
          src: qlCN,
          name:'权力-国内',
          currency: '￥'
        },
        "6" : {
          src: qlCN,
          name:'权力-英文',
          currency: '$'
        },
        "7" : {
          src: qlCN,
          name:'权力-泰国',
          currency: '$'
        },
        "8" : {
          src: qlCN,
          name:'权力-韩国',
          currency: '$'
        },
        "9" : {
          src: qlCN,
          name:'权力-欧洲',
          currency: '$'
        },
        "2" : {
          src: jzCN,
          name:"九州-国内",
          currency: '￥'
        },
        "3" : {
          src: lybCN,
          name:"琅琊榜",
          currency: '￥'
        },
        "4" : {
          src: zjCN,
          name:"战舰-国内",
          currency: '￥'
        },
        "5" : {
          src: zjHW,
          name: "战舰-欧洲",
          currency: '$'
        },
        "10" : {
          src: jzCN,
          name: "九州-港台",
          currency: 'NT$'
        },
        "11" : {
          src: qlCN,
          name: "权力-港台",
          currency: '$'
        },
        "11" : {
          src: qlCN,
          name: "权力-港台",
          currency: '$'
        },
        "12" : {
          src: qlCN,
          name: "权力-越南",
          currency: '$'
        },
        "13" : {
          src: zjHW,
          name: "战舰联盟-港台",
          currency: '$'
        },
        "14" : {
          src: mzHW,
          name: "梦幻诛仙-新马",
          currency: '$'
        },
        "15" : {
          src: qlCN,
          name: "权力-阿拉伯",
          currency: "$"
        },
        "16" : {
          src: rrzj,
          name: "软软大作战",
          currency: "￥"
        }
      };
      var navelists = JSON.parse(localStorage.getItem("ZULONGBINAVLIST"));
      var objCP = {};
      for(var i in obj){
        for(var j in navelists){
          if(i === j.split("-")[1]){
            objCP[j] = obj[i];
          }
        }
      }
      this.projectName = objCP;
  },
  beforeMount(){
    /*默认菜单改变*/
    this.routerName = this.$route.path;
    this.pageDataShow();
    this.projectGroup();
    this.getIndex();
    this.localUrl();
    this.chooseProjects(0);
  }
 
}
</script>